<template>
  <div id="menu-manager">
    <v-header title="菜单管理" :showDownloadBtn="false" :saveShow="false"></v-header>
    <!--主页面内容-->
    <div class="box">
      <el-header height="58px">
        <el-row class="toolbar">
          <el-button type="primary" size="mini" @click="addBtnClick">增加</el-button>
          <el-button type="primary" size="mini" @click="delBtnClick">删除</el-button>
          <el-button type="primary" size="mini" @click="editBtnClick">编辑</el-button>
          <el-button type="primary" size="mini" @click="refreshTreeData">刷新</el-button>
          <!--<el-button type="primary" size="mini">上移</el-button>-->
          <!--<el-button type="primary" size="mini">下移</el-button>-->
        </el-row>
      </el-header>
      <el-main style="margin-bottom: 20px">
        <menu-tree-grid ref="TreeGrid"></menu-tree-grid>
      </el-main>
    </div>

    <!--下面放弹出的内容-->
    <template>
      <el-dialog
        :title="addDialogMode == 'ADD' ? '新增' : '编辑'"
        :visible.sync="addDialogVisiable"
        v-model="addDialogMode"
        @close="ardCancelBtnClick"
        width="822px">
        <el-form
          ref="addForm"
          :model="addFormData"
          :rules="addRules"
          label-width="120px"
          :label-position="'right'">
          <el-row :gutter="24" v-if="addDialogMode === 'ADD'">
            <el-col :span="12">
              <el-form-item label="新增一级" prop="isRoot">
                <el-switch v-model="addFormData.isRoot"
                           active-value="on"
                           inactive-value="off"
                           :disabled="addFormData.isRootSwitchAbled"
                           active-color="#13ce66"
                           inactive-color="#ff4949">
                </el-switch>
                <span class="ml5">{{addFormData.isRoot === 'on' ? '是' : '否'}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上级菜单" prop="uper" v-show="addFormData.isRoot === 'off'">
                <!-- 上级名称 -->
                <el-input v-model="addFormData.pname"
                          placeholder="请在此输入"
                          disabled>
                </el-input>
                <!-- 上级id，隐藏的 -->
                <el-input v-model="addFormData.parentId"
                          v-show="false"
                          :contenteditable="false">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="应用系统" prop="sys_no">
                <el-select v-model="addFormData.sys_no" placeholder="请选择" popper-class="zIndex-popper">
                  <el-option
                      v-for="item in systemList"
                      :key="item.index"
                      :label="item.sys_name" :value="item.sys_no"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12"></el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="菜单名称" prop="name">
                <el-input v-model="addFormData.name"
                          placeholder="请在此输入">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!--MENU_TYPE.put("FUNCTION_POINT", "功能按钮");-->
              <!--MENU_TYPE.put("DIR", "目录");-->
              <!--MENU_TYPE.put("MENU", "菜单");-->
              <el-form-item label="菜单类型" prop="type">
                <el-select v-model="addFormData.type" placeholder="请选择" popper-class="zIndex-popper">
                  <el-option
                    v-for="item in menuTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!--<el-col :span="8">-->
              <!--现在加载的类型固定为HTML就可以了 URL和ALIAS目前项目用不上-->
              <!--<el-form-item label="加载类型" prop="loadType">-->
                <!--<el-input v-model="addFormData.loadType"-->
                          <!--placeholder="请在此输入">-->
                <!--</el-input>-->
              <!--</el-form-item>-->
              <!--这个可不要-->
              <!--<el-form-item label="资源唯一标识" prop="resourceCode">-->
                <!--<el-input v-model="addFormData.resourceCode"-->
                          <!--placeholder="请在此输入">-->
                <!--</el-input>-->
              <!--</el-form-item>-->
            <!--</el-col>-->
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <!--<el-form-item label="数据来源" prop="source">-->
                <!--<el-input v-model="addFormData.source"-->
                          <!--placeholder="请在此输入">-->
                <!--</el-input>-->
              <!--</el-form-item>-->
              <el-form-item label="资源地址" prop="url">
                <el-input v-model="addFormData.url"
                          placeholder="请在此输入">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="菜单参数" prop="param">
                <el-input v-model="addFormData.param"
                          placeholder="请在此输入">
                </el-input>
              </el-form-item>
            </el-col>
            <!--<el-col :span="8">-->
              <!--<el-form-item label="资源图标" prop="iconId">-->
                <!--<el-input v-model="addFormData.iconId"-->
                          <!--placeholder="请在此输入">-->
                <!--</el-input>-->
              <!--</el-form-item>-->
            <!--</el-col>-->
          </el-row>
          <el-form-item label="菜单描述" prop="remark">
            <el-input v-model="addFormData.remark"
                      type="textarea"
                      placeholder="请在此输入">
            </el-input>
          </el-form-item>
          <!--<el-form-item label="菜单标签" prop="menuTags">-->
          <!--<el-input v-model="addFormData.menuTags"-->
          <!--placeholder="请在此输入">-->
          <!--</el-input>-->
          <!--</el-form-item>-->
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm('addForm')" class="dialog-btn">重置</el-button>
            <el-button @click="ardCancelBtnClick" class="dialog-btn">关闭</el-button>
            <el-button @click="submitFormData" type="primary" class="dialog-btn">确定</el-button>
        </span>
      </el-dialog>
    </template>
  </div>
</template>

<script type="text/ecmascript-6">
import {VHeader} from '../../../components'
import MenuTreeGrid from './menuTreeGrid'
import ajax from '../../../api/ajax'
import Msg from '../../../assets/js/msg'
import { sysNo } from '../../../dict/dict.js'
import api from '../../../api/url'
import {notCnValidator} from '../../../assets/js/rules'

export default {
  name: 'menu-manager',
  data () {
    return {
      systemList: [],
      addDialogVisiable: false, // 新增对话框显示控制
      addDialogMode: { // 对话框色对话框模式  ADD新增 MODIFY 修改
        type: String,
        default: 'ADD'
      }, // 对话框模式
      currentItem: {
        // isRootSwitchAbled 在不选择记录的时候，是否是新增一级菜单应该是不可用的。这里默认为可用
        isRootSwitchAbled: true,
        isRoot: 'on', // 是否是新增顶级
        isValid: 'Y' // 是否启用
      }, // 表单初始化数据
      addFormData: {}, // 新增对话框表单数据
      addRules: {
        name: [ // 名称
          { required: true, message: '此项为必输项', trigger: 'blur' },
          { min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
        ],
        type: [ // 菜单类型
          { required: true, message: '请选择菜单类型', trigger: 'blur' }
        ],
        resourceCode: [ // 资源唯一标识
          { max: 16, message: '长度在小于 16 个字符', trigger: 'blur' }
        ],
        url: [ // 资源地址
          { required: true, message: '此项为必输项', trigger: 'blur' },
          { max: 200, message: '长度在小于 200 个字符', trigger: 'blur' },
          { validator: notCnValidator, trigger: 'blur' }
        ],
        param: [ // 菜单参数
        ],
        remark: [ // 菜单描述
        ],
        sys_no: [ // 应用系统
          { required: true, message: '此项为必输项', trigger: 'blur' }
        ]
      },
      menuTypes: [
      //   {
      //   value: 'FUNCTION_POINT',
      //   label: '功能按钮'
      // },
        {
        value: 'DIR',
        label: '目录'
      }, {
        value: 'MENU',
        label: '菜单'
      }]
    }
  },
  components: {
    MenuTreeGrid,
    VHeader
  },
  methods: {
    // 新增按钮
    addBtnClick () {
      // 查询系统列表参数
      this.getStstemList()
      // 显示新增对话框
      this.addDialogVisiable = true
      // 新增对话框模式
      this.addDialogMode = 'ADD'
      // 获取选择的数据
      let currentNode = this.$refs.TreeGrid.getCurrentNode()
      if (currentNode) {
        /*
          如果当前选中了一条数据，那么要将选择的数据的相关值初始化到新增表单中去
        */
        let currentNodeCopy = JSON.parse(JSON.stringify(currentNode))
        this.currentItem = {
          isRootSwitchAbled: false, // 打开能切换是否是新增一级菜单
          isRoot: 'off', // 是否是新增一级
          layer: currentNodeCopy['layer'],
          parentId: currentNodeCopy['id'], // 上级id
          pname: currentNodeCopy['name'], // 上级名称
          isValid: 'Y' // 是否启用
        }
        this.addFormData = {...this.currentItem}
      }
    },
    // 删除按钮
    delBtnClick () {
      // 获取选择的数据
      let currentNode = this.$refs.TreeGrid.getCurrentNode()
      if (!currentNode) {
        this.$message.error('请选择一条记录进行删除!')
      } else {
        // 确定删除选中的信息吗？
        Msg.confirm(`确定删除名称为【${currentNode.name}】的记录吗？`, {
          onConfirm: () => {
            let postData = currentNode
            ajax.post(api.DEL_SYS_MENU, postData).then(res => {
              // 刷新数据
              this.refreshTreeData()
              // 取消删除的选择
              this.$refs.TreeGrid.cancelCurrentSelect()
            })
          },
          onCancel () {
          }
        })
      }
    },
    // 编辑按钮
    editBtnClick () {
      // 获取选择的数据
      let currentNode = this.$refs.TreeGrid.getCurrentNode()
      if (!currentNode) {
        this.$message.error('请选择一条记录进行编辑!')
      } else {
        // 显示编辑对话框
        this.addDialogVisiable = true
        // 新增对话框模式
        this.addDialogMode = 'MODIFY'

        let currentNodeCopy = JSON.parse(JSON.stringify(currentNode))
        this.currentItem = currentNodeCopy
        this.addFormData = {...this.currentItem}
      }
    },
    // 刷新数据
    refreshTreeData () {
      this.$refs.TreeGrid.refreshTreeData()
      // todo: 现在这个树形表格的刷新不好实现，暂时弄成页面刷新
      this.$router.go(0)
    },
    // 取消新增
    ardCancelBtnClick () {
      this.addDialogVisiable = false
      // 清空数据
      this.addFormData = {}
      // 清除验证
      this.$refs.addForm.clearValidate()
    },
    // 重置表单
    resetForm (formName) {
      this.addFormData = {...this.currentItem}
      // 清除验证
      this.$refs[formName].clearValidate()
    },
    // 预处理表单数据
    preHandFormData (formData) {
      let isRoot = formData['isRoot']
      let parentId = formData['parentId']
      let pname = formData['pname']

      // 如果是新增一级，需要将上级和上级名称清空
      if (isRoot === 'on') {
        parentId = '0'
        pname = null
      }

      return {
        isRoot,
        iconId: 0,
        id: formData['id'],
        loadType: 'HTML',
        name: formData['name'],
        param: formData['param'],
        remark: formData['remark'],
        resourceCode: formData['resourceCode'],
        seqSort: formData['seqSort'],
        // source: 'DATALOAD', // 能不传
        sysNo: sysNo,
        type: formData['type'],
        url: formData['url'],
        version: formData['version'],
        layer: formData['layer'],
        parentId,
        pname,
        sys_no: formData['sys_no']
      }
    },
    // 新增
    add (postData, callback) {
      ajax.post(api.ADD_SYS_MENU, postData).then(res => {
        callback && callback()
      })
    },
    // 修改
    update (postData, callback) {
      ajax.post(api.MODIFY_SYS_MENU, postData).then(res => {
        callback && callback()
      })
    },
    // 提交新增数据
    submitFormData () {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          let postData = this.preHandFormData(this.addFormData)
          let callback = () => {
            // 刷新数据
            this.refreshTreeData()
            // 隐藏新增对话框
            this.addDialogVisiable = false
            // 数据清空
            setTimeout(() => {
              this.resetForm('addForm')
            }, 200)
          }
          if (this.addDialogMode === 'ADD') {
            this.add(postData, callback)
          } else {
            this.update(postData, callback)
          }
        } else {
          return false
        }
      })
    },
    // 查询系统列表参数
    getStstemList () {
      ajax.post(api.GET_SYSTEM_LIST)
        .then(res => {
          this.systemList = res.data
        })
    }
  },
  created () {
    // 默认表单数据初始化
    this.addFormData = JSON.parse(JSON.stringify(this.currentItem))
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #menu-manager
    height 100%
    font-size 14px
    .box
      height calc(100% - 56px)
      padding 10px
      .el-header
        padding 0 0
        margin-bottom 3px
        .toolbar
          height 50px
          line-height 50px
          vertical-align middle
          background-color #fff
          padding 2px 15px
      .el-main
        height 100%
        padding 0 0
        .tree-view
          margin-bottom 40px
      .el-form
        .el-select
          width 100%
    .el-dialog__wrapper
      .el-dialog
        .el-dialog__body
          .el-form
            .el-row
              .el-col
                .el-form-item
                  .el-form-item__content
                    .el-select
                      width 100%
                      height 40px
                      .el-input
                        height 40px
                        .el-input__inner
                          height 40px
</style>
